<template>
  <div>
    <div class="tit">
      基本信息
    </div>
    <table>
      <tr>
        <th>
          所属标段
        </th>
        <td>
          <zz-select
            class="inline"
            style="width: 100%"
            :border= false
            :options="{width: '100%'}"
            :option="periodList"
            :all = false
            optionColor = "#939997"
            name = "二期"
            @optionClick="period">
          </zz-select>
        </td>
        <td>  
          <zz-select
            class="inline"
            style="width: 100%"
            :border= false
            :options="{width: '100%'}"
            :option="biaoduanList"
            :all = false
            optionColor = "#939997"
            name = "三标段"
            @optionClick="biaoduan">
          </zz-select>
        </td>
        <th>
          自编号
        </th>
        <td>
          <zz-select
            class="inline mr10"
            style="width: 100%"
            :border= false
            :options="{width: '100%'}"
            :option="numList"
            :all = false
            optionColor = "#939997"
            name = "1#"
            @optionClick="num">
          </zz-select>
        </td>
      </tr>
      <tr>
        <th>
          设备标识
        </th>
        <td colspan="2">
          <input placeholder="#1升降机">
        </td>
        <th>
          绑定监控设备
        </th>
        <td>
          <input placeholder="#1升降机">
          <button class="chooseBtn pointer">选择</button>
        </td>
      </tr>
      <tr>
        <th>自有设备</th>
        <td colspan="4">
          <zz-radio
            style="width: 100px"
            :key="item.id"
            :value = "item.id"
            v-for="item in radioList"
            @handle="handleRadio"
            :checked = item.check>
            {{item.name}}
          </zz-radio>
        </td>
      </tr>
    </table>
    <!-- 设备资料 -->
    <div class="tit">
      设备资料
    </div>
    <table>
      <tr>
        <th>
          生产厂家
        </th>
        <td>
          <input>
        </td>
        <th>
          规格型号
        </th>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <th>
          出厂编号
        </th>
        <td>
          <input>
        </td>
        <th>
          出厂日期
        </th>
        <td>
          <zz-date type="day" ></zz-date>
        </td>
      </tr>
      <tr>
        <th>初始登记号</th>
        <td>
          <input>
        </td>
        <th>最大安装高度(米)</th>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <th>使用年限</th>
        <td>
          <input>
        </td>
        <th>进场日期</th>
        <td>
          2018-01-02
        </td>
      </tr>
      <tr class="takePic">
         <th>设备安装性能表<br/>(拍照上传)</th>
        <td colspan="3">
          <i class="iconfont icon-plus pointer"></i>
        </td>
      </tr>
    </table>
    <div class="footer-button">
      <button class="button-lr ml20 left" @click="close">设备离场</button>
      <button class="button-line ml20 left" @click="close">重新进场</button>
      <button class="button-lr ml10 left" @click="close">删除设备</button>
      <button class="button-lb mr20 right" @click="seve">保存</button>
      <button class="button-lb mr10 right" @click="close">取消</button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'

export default {
  name: 'towerInfo',
  computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    data () {
      return {
        periodList: {
          1: '二期',
          2: '三期'
        },
        biaoduanList: {
          1: '一标段',
          2: '二标段'
        },
        numList: {
          1: '#1',
          2: '2',
          3: '#3'
        },
        radioList: [
          {id: 1, check: true, name: '是'},
          {id: 2, check: false, name: '否'}
        ]
      }
    },
    methods: {
      handleRadio (value) {
        // 自有设备选择触发事件
      },
      close () {
        this.$emit('close')
      },
      period () {
        // 设置期次
      },
      seve () {
        // 保存设备档案
      },
      biaoduan () {
        // 设置标段
      },
      num () {
        // 设置自编号
      }
    }
}
</script>

<style lang="scss" scoped>
  .tit {
    font-weight: bold;
    border-left: 2px solid $color;
    padding-left: 10px;
  }
  table {
    margin: 15px 0;
    border: 1px solid #e6e6e6;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    tr {
      height: 38px;
    }
    .takePic {
      height: 80px;
      th {
        text-align: center;
        padding: 0;
        line-height: 24px;
      }
      td {
        .icon-plus {
          width: 30px;
          height: 30px;
        }
      }
    }
    th,td {
      border: 1px solid #e6e6e6;
      padding-left: 16px;
    }
    th {
      background: #eff0f2;
      color: #989898;
      text-align: left;
      font-weight: 500;
    }
    td {
      position: relative;
      input {
        border: 0;
        width: 90%;
      }
      .chooseBtn {
        color: $color;
        position: absolute;
        right: 10px;
        font-size: 14px;
        border:0;
      }
    }
  }
  .footer-button {
    position: absolute;
    bottom: 0;
    width: 938px;
    margin-left: -20px;
    margin-bottom: -20px;
    background: #f0f4f5;
    height: 66px;
    text-align: right;
    button {
      margin-top: 15px;
      background: #fff;
      &:hover {
        background: $color;
      }
    }
  }
</style>

